// 将程序定义在 加载事件中
$(function () {

    // 调用函数动态生成页面
    setPage();

    // 通过 事件委托 给 父级标签添加点击事件
    const oContainer = document.querySelector('.container');
    oContainer.addEventListener('click', event => {
        // 获取 购物车数据信息  
        // 将 json字符串 还原为 对应的数据结构
        let cart = JSON.parse(window.localStorage.cart);

        // 点击全选标签 
        if (event.target.getAttribute('name') === 'all') {
            // 获取 全选input标签 checked属性值
            // 设定给 购物车数据中 所有商品 buy 属性
            cart.forEach(item => {
                // 点击标签checked属性 赋值给 购物车商品buy属性存储 
                item.buy = event.target.checked;
            })


        } else if (event.target.getAttribute('name') === 'other') {
            // 循环遍历 购物车数据数组 
            // 如果 购物车商品的goods_id 和 点击商品的goods_id 相同
            // 设定 购物车商品的buy存储 点击标签checked属性值
            for (let i = 0; i <= cart.length - 1; i++) {
                // i 是 索引下标 
                // cart[i] 是 数值中存储的商品数据对象
                if (cart[i].goods_id === event.target.getAttribute('goods_id')) {
                    //  如果 数组中商品的goods_id 和 点击的商品的goods_id 相同
                    //  点击标签的checked属性值 赋值给 数组中商品boy属性
                    cart[i].buy = event.target.checked;

                    // 终止循环
                    break;
                }

            }

            // 如果点击的是 删除标签 
        } else if (event.target.getAttribute('name') === 'del') {
            // 弹出提示框 确定要删除 再执行程序
            if (window.confirm('您确定要删除吗') === false) return;


            // 循环遍历 购物车数据数组 
            // 如果 购物车商品的goods_id 和 点击商品的goods_id 相同
            // 删除 数组中这个商品数据对象 
            for (let i = 0; i <= cart.length - 1; i++) {
                // i 是 索引下标 
                // cart[i] 是 数值中存储的商品数据对象
                if (cart[i].goods_id === event.target.getAttribute('goods_id')) {
                    // 从 索引下标 i 开始 删除 1 个单元 
                    // 因为 当前数组没有存储重复数据 不需要考虑 数组坍塌造成的影响
                    cart.splice(i, 1);

                    // 终止循环
                    break;

                }

            }


            // 如果点击的是 - 标签 
        } else if (event.target.getAttribute('name') === '-') {
            // 循环遍历 购物车数据数组 
            // 如果 购物车商品的goods_id 和 点击商品的goods_id 相同
            // 购物车商品的num属性存储的数值累减1 
            for (let i = 0; i <= cart.length - 1; i++) {
                // i 是 索引下标 
                // cart[i] 是 数值中存储的商品数据对象
                if (cart[i].goods_id === event.target.getAttribute('goods_id')) {
                    // 购物车商品 num属性 累减1
                    cart[i].num--;

                    // 终止循环
                    break;

                }

            }

            // 如果点击的是 + 标签 
        } else if (event.target.getAttribute('name') === '+') {
            // 循环遍历 购物车数据数组 
            // 如果 购物车商品的goods_id 和 点击商品的goods_id 相同
            // 购物车商品的num属性存储的数值 累加1
            for (let i = 0; i <= cart.length - 1; i++) {
                // i 是 索引下标 
                // cart[i] 是 数值中存储的商品数据对象
                if (cart[i].goods_id === event.target.getAttribute('goods_id')) {
                    // 购物车商品 num属性 累加1
                    cart[i].num++;

                    // 终止循环
                    break;

                }

            }
        }




        // 将 新数组的数据 写入 localStorage 中 
        window.localStorage.cart = JSON.stringify(cart);

        // 根据 新的 localStorage 中 存储的购物车数据 
        // 再次动态渲染生成页面
        setPage();
    })

})



// 封装一个函数 动态生成页面
function setPage() {
    // 1, 调用 localStorage 中 购物车数据信息
    let cart = window.localStorage.cart;

    // 2, 定义变量 存储 所有商品购买状态
    let bool = true;

    // 3, 定义变量 存储 购物数据
    let type = 0;
    let number = 0;
    let money = 0;

    // 如果 调用的结果是 undefined 
    if (cart === undefined) {
        // 证明 没有 购物车 键值对 
        // 也就是 第一次购物 还没有创建购物车信息

        $('.container').html(`<div class="kongche w1200">
        <img src="./../images/car图.png" alt="">
        <div>
            <h2>您的购物车还是空的，赶紧行动吧!您可以:</h2>
            <p>看看 <a href="./list.html?cat_one_id=食品酒水">食品酒水</a></p>
            <p>看看 <a href="./list.html?cat_one_id=家装建材">家装建材</a></p>
            <p>看看 <a href="./list.html?cat_one_id=奶粉尿裤">奶粉尿裤</a></p>
            <p>看看 <a href="./list.html?cat_one_id=手机相机">手机相机</a></p>
            <p>看看 <a href="./list.html?cat_one_id=童装玩具">童装玩具</a></p>
        </div>
    </div>`)

        // 如果 调用结果不是 undefined
    } else {
        // 证明 有 购物车 键值对 
        // json字符串 还原为对应的数据结构
        cart = JSON.parse(cart);

        // 判断 数组 是不是 空数组 
        if (cart.length === 0) {
            // 购物车是空数组 证明是 空车
            $('.container').html(`<div class="kongche w1200">
            <img src="./../images/car图.png" alt="">
            <div>
                <h2>您的购物车还是空的，赶紧行动吧!您可以:</h2>
                <p>看看 <a href="./list.html?cat_one_id=食品酒水">食品酒水</a></p>
                <p>看看 <a href="./list.html?cat_one_id=家装建材">家装建材</a></p>
                <p>看看 <a href="./list.html?cat_one_id=奶粉尿裤">奶粉尿裤</a></p>
                <p>看看 <a href="./list.html?cat_one_id=手机相机">手机相机</a></p>
                <p>看看 <a href="./list.html?cat_one_id=童装玩具">童装玩具</a></p>
            </div>
        </div>`)



        } else {
            // 购物车不是空数组 有 商品数据 
            // 根据商品数据 动态渲染生成页面内容

            // li之前的固定内容
            let str = `
            <div class="panel panel-info ">
            <div class="panel-body bg-info">
              <div class="checkbox">
                <label>
                  <input type="checkbox" value=""  name="all">
                  全选
                  <span class="shangpin">商品</span>
                  <span class="danjai">单价</span>
                  <span class="shuliang">数量</span>
                  <span class="zongjia">总价</span>
                  <span class="caozuo">操作</span>
                </label>
              </div>
            </div>
            <div class="panel-footer">
              <ul class="cart-list">
        `;

            // li是根据 localStorage 中 购物车数组 动态生成 

            cart.forEach(item => {
                // 循环遍历时 判断 item 中 存储的当前商品的购买状态
                // 如果有商品的购买状态是 false 变量 存储false 
                if (item.buy === false) {
                    bool = false;

                    // 当前商品的购买状态时 true 也就是 要购买
                } else {
                    // 计算 购买种类 数量 价格
                    type += 1;
                    number += item.num;
                    money += item.num * item.goods_price;

                }

                str += `
                <li class="cart-item">
                <div class="left">
              <input name="other" goods_id="${item.goods_id}" type="checkbox" ${item.buy ? 'checked' : ''}>
                </div>
                <div class="right">
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object"
                          src="${item.goods_small_logo}"
                          alt="...">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">${item.goods_name}</h4>
                      <p  class="er">
                        <i class="glyphicon glyphicon-yen"></i>
                        <span class="dan">￥${item.goods_price}</span>
                      </p>
                      <div class="btn-group pull-right" role="group" aria-label="...">
                      <button name="-" goods_id="${item.goods_id}" type="button" class="btn btn-default" ${item.num === 1 ? 'disabled' : ''}>-</button>                               
                      <button type="button" class="btn btn-default" disabled>${item.num}</button>
                      <button name="+" goods_id="${item.goods_id}" type="button" class="btn btn-default" ${item.num === Number(item.goods_number) ? 'disabled' : ''}>+</button>
                      </div>
                      <p class="yi">
                        <span class="heji">￥${(item.goods_price*item.num).toFixed(2)}</span>
                      </p>
                  <button  name="del" goods_id="${item.goods_id}" class="del btn btn-danger">删除</button>
                    </div>
                  </div>
                </div>
              </li>

      
          `;

            })



            // li之后的内容 是 固定内容
            str += `
            </ul>
            </div>
          </div>
        `;

        let str2 =`
        <div class="foot w1200 ">
          <div class="flex"></div>
          <div class="zong">
            <p>总计: <span>￥${money.toFixed(2)}</span></p>
            <p>已选择 <span>${number}</span>件商品</p>
          </div>
          <div class="jiesuan"> 立即结算</div>
        </div>`

            // 将 生成的字符串 写入页面
            $('.container').html(str);
            $('.hjhj').html(str2);

            // 将标签写入后 设定 全选标签的属性
            $('[name="all"]').prop('checked', bool);
        }


    }




}


$('[name="logout"]').click(()=>{
    const cookieObj = myGetCookie();
    console.log(cookieObj);
    if (cookieObj.login === undefined) {
        if (window.confirm('您还未登录 点击确定 跳转登录页')) {
            window.location.href = './login.html';
        }  } else {
            mySetCookie({
                key: 'login',
                path: '/',
                val: 100,
                time: -1,
            })
            window.alert('您已退出登录');
        }
}
)
$('[name="cart"]').click(() => {
    const cookieObj = myGetCookie();
    console.log(cookieObj);
    if (cookieObj.login === undefined) {

        if (window.confirm('您还未登录 点击确定 跳转登录页')) {
            window.location.href = './login.html';
        }
    } else {
        window.location.href = './cart.html';
    }
})


